/*
* @Author: Josh
* @Date:   2019-08-16 11:39:23
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 18:32:42
*/

/* 列表样式 */
.ju-list > .ju-list-item {
    display      : flex;
    position     : relative;
    padding      : .5rem 1rem;
    font-size    : .8rem;
    background   : #fff;
    color        : #333;
    border-bottom: 1px solid #eee;
}


/* 竖直排列的列表项 */
.ju-list.row-2 {
    display  : flex;
    flex-wrap: wrap;
}
.ju-list.row-2 > .ju-list-item {
    flex          : 1 1 50%;
    box-sizing    : border-box;
    flex-direction: column;
    border-right  : 1px solid #eee;
}
.ju-list.row-2 > .ju-list-item:nth-child(2n){
    border-right: none;
}


/* 列表项的图片容器 */
.ju-list .item-img-wrap {
    flex         : 0 0 5rem;
    height       : 5rem;
    margin-right : .5rem;
    border-radius: .2rem;
    overflow     : hidden;
}
/* 列表项图片 */
.ju-list .item-img-wrap > .item-img {
    width : 100%;
    height: 100%;
}


/* 列表项文本区域 */
.ju-list .item-content-wrap {
    position       : relative;
    flex           : 1;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;/*空余区域分布于元素之间*/
}
/* 列表项的标题 */
.ju-list .item-content-wrap > .item-title {
    height            : 2rem;
    line-height       : 1rem;/*两行文本*/
    font-size         : .8rem;
    font-weight       : normal;
    overflow          : hidden;
    /*多行折行截断*/
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}